{include file="common:header" /}
{include file="common:side" /}
<!-- 引入样式 -->
<link rel="stylesheet" href="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.css">
    <div id="page-wrapper" >
      <!-- 舆情日报 -->
      <!--*************************** content部分开始 ******************-->
      <div class="container-fluid" id="m_main" >
        <div class="row m-t-20">
          <div class="col-sm-12">
            <div class="white-box">
              <h2 class="box-title m-b-20">调课</h2>
              <div class="row">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">选择课程</label>
                    <select class="selectpicker" data-style="form-control" v-model="course_id" @change="getCourse()">
                      <option value="">请选择</option>
                      {foreach $course_list as $key=>$vo } 
                      <option value="{$vo.id}">{$vo.name}</option>
                      {/foreach}
                    </select>
                  </div>
                </div>
              </div>
              <div class="row" v-show="course.name">
                <div class="col-sm-4 form-list">
                  <div class="form-group ">
                    <label class="control-label">课程名称：</label>
                      <ul class="conList">
                        <li class="conItem">
                          <div class="box">
                            <div class="conItemed">
                              <span>课程名称：</span>{{course.name}}
                            </div>
                            <div class="conItemed">
                              <span>课程课时：</span>{{course.periods}}课时
                            </div>
                            <div class="conItemed">
                              <span>课程老师：</span>{{course.teacher_name}}
                            </div>
                            <div class="conItemed">
                              <span>课程校址：</span>{{course.address}}
                            </div>
                            <div class="conItemed">
                              <span>课程班级：</span>{{course.classes_name}}
                            </div>
                            <div class="conItemed">
                              <span>课程教室：</span>{{course.classroom_name}}
                            </div>
                            <div class="conItemed">
                              <span>课程时间：</span>{{course.class_time_str}}
                            </div>
                          </div>
                        </li>
                      </ul>
                  </div>
                </div>
              </div>
              <div class="row" v-show="course.name">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">原课程时间</label>
                    <select class="selectpicker" data-style="form-control" v-model="classtime_id" id="classtime_id">
                      <option value="">请选择</option>
                      <option :value="item.id" v-for="(item,index) in classtime"  :key='index'>{{item.begin_time}}-{{item.end_time}}</option>
                    </select>
                  </div>
                </div>
              </div>
              <div class="row" v-show="course.name">
                <div class="col-sm-1">
                  <div class="form-group">
                    <label class="control-label">修改时间为</label>
                  </div>
                </div>
              </div>
              <div class="row" v-show="course.name">
                <div class="col-sm-4">
                  <div class="form-group">
                    <div class="input-group">
                      <input type="text" autocomplete="off" id="start_time" name="start" class="form-control input-group-input-date" placeholder="请选择开始时间">
                      <span class="input-group-btn input-group-btn-date">
                        <i class="mdi mdi-calendar-text"></i>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="col-sm-4">
                  <div class="form-group">
                    <div class="input-group">
                      <input type="text" autocomplete="off" id="end_time" name="end" class="form-control input-group-input-date" placeholder="请选择结束时间">
                      <span class="input-group-btn input-group-btn-date">
                        <i class="mdi mdi-calendar-text"></i>
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row" v-show="course.name">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">修改课程老师</label>
                    <select class="selectpicker" data-style="form-control" v-model="teacher_id">
                      <option value="">请选择</option>
                      {foreach $teacher as $key=>$vo } 
                      <option value="{$vo.id}">{$vo.name}</option>
                      {/foreach}
                    </select>
                  </div>
                </div>
              </div>
              <div class="row" v-show="course.name">
                <div class="col-sm-4">
                  <div class="form-group">
                    <label class="control-label">修改课程教室</label>
                    <select class="selectpicker" data-style="form-control" v-model="classroom_id">
                      <option value="">请选择</option>
                      {foreach $classroom as $key=>$vo } 
                      <option value="{$vo.id}">{$vo.name}</option>
                      {/foreach}
                    </select>
                  </div>
                </div>
              </div>
              <div class="row" v-show="students.length">
                <div class="col-sm-4 form-list">
                  <div class="form-group ">
                    <label class="control-label">课程学生：</label>
                      <ul class="students-ul">
                        <li class="students-li" v-for="(item,index) in students" :key='index'>
                          <img :src="item.photo" alt="">
                          <div class="studentName">{{item.name}}</div>
                        </li>
                      </ul>
                  </div>
                </div>
              </div>
              <div class="row m-t-40">
                <div class="col-sm-8 ta-c">
                  <button type="button" name="" class="btn btn-outline btn-primary m-r-40" @click="doSubmit()">提交</button>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- /.row -->
      </div>
      <!--*************************** content部分结束 ******************-->

      <!-- <footer class="footer text-center"> 2017 &copy; Ample Admin brought to you by themedesigner.in </footer> -->
    </div>
  {include file="common:js" /}
  {include file="common:footer" /}
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.min.js"></script>
  <script src="/assets/plugins/bower_components/bootstrap-datetimepicker/bootstrap-datetimepicker.zh-CN.js"></script>
  <script src="/web/js/edit.js"></script>

  <script type="text/javascript">
    var vm = new Vue({
      el: '#m_main',
      data() {
        return {
          sid: '{$sid}',
          course: {},
          students:{},
          classtime:{},
          course_id: '',
          classtime_id: '',
          teacher_id: '',
          classroom_id: '',
          begin_time: '',
          end_time: '',
        }
      },
      mounted() {
        this.realizeDatePicker();
      },
      methods: {
        //实例化时间选择器
        realizeDatePicker() {
          var that = this;
          $('#start_time').datetimepicker({
            autoclose: true,
            startView: 1,
            // maxView: 1,
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii"
          });
          $('#start_time').datetimepicker()
           .on('hide', function (ev) {
            that.begin_time = $("#start_time").val();
           });
          $('#end_time').datetimepicker({
            autoclose: true,
            startView: 1,
            // maxView: 1,
            language: "zh-CN",
            format: "yyyy-mm-dd hh:ii"
          });
          $('#end_time').datetimepicker()
          .on('hide', function (ev) {
            that.end_time = $("#end_time").val();
          });
        },
        // 提交
        doSubmit(){
          var that = this;
          var param = {
            sid: that.sid,
            course_id: that.course_id,
            classtime_id: that.classtime_id,
            teacher_id: that.teacher_id,
            classroom_id: that.classroom_id,
            begin_time: that.begin_time,
            end_time: that.end_time,
          }
          axios.post('/dboard/teacher/change_course', param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              //请求成功
              alert(res.data.Msg);
              window.location.href = '/dboard/teacher/lists';
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        },
        getCourse(){
           // this.fage=false;
            // this.fage=true; 
          var that = this;
          var param = {
            course_id: that.course_id,
          }
          axios.post('/dboard/course/getCourseInfo', param,{headers: {'X-Requested-with':'XMLHttpRequest'}}).then(res => {
            // console.log(res);
            if(res.data.Code == 0){
              //请求成功
              
              that.course = res.data.Data.course;
              that.students = res.data.Data.students;
              that.classtime = res.data.Data.classtime;
              setTimeout(()=>{
                $('#classtime_id').selectpicker('refresh'); 
              },500); 
              console.log(res.data.Data.classtime)
             
            }else{
              alert(res.data.Msg)
            }
          }).catch(err => {
            console.log(err);
          })
        }
      }
    })
  </script>
  

